<!--  -->
<template>
  <div class="container">
    <div class="mask" v-if="flag" @click="$emit('closeDialog')"></div>
    <div :class="['share-order',flag?'show':'']" >
      <div class="top flex justify-between aligin-center pt-14">
        <span class="share-icon"></span>
        <span class="ml-6 mr-auto f-14 f-bold">我的号码</span>
        <span class="close" @click="$emit('closeDialog')"></span>
      </div>
      <div class="mt-20 content-wrapper">
        <template v-for="(item,index) in numbers">
          <div :key="index" class="number-item flex aligin-center">
            <div class="number flex aligin-center flex-column justify-center">
              <span>{{numberSplit(item.number)[0]}}</span>
              <span
                v-if="numberSplit(item.number)[1]&&numberSplit(item.number)[1]!=numberSplit(item.number)[0]"
                class="line"
              ></span>
              <span
                v-if="numberSplit(item.number)[1]&&numberSplit(item.number)[1]!=numberSplit(item.number)[0]"
              >{{numberSplit(item.number)[1]}}</span>
            </div>
            <div class="divline flex aligin-center justify-center">
              <div class="line"></div>
            </div>
            <div class="info">
              <div class="shop-name">{{item.name}}</div>
              <div class="count color-red">X{{item.c}}</div>
              <div class="color-gray">{{item.time}}</div>
            </div>
          </div>
        </template>
        <div class="no-data" v-if="numbers.length==0"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { my_numbers } from '../api/api'
export default {
  components: {},
  props: {
    flag: {
      type: Boolean,
      default: () => {
        return false
      },
      required: true
    },
    activityKey: {
      type: String,
      default: () => {
        return ''
      },
      required: true
    },
    shopId: {
      type: Number,
      default: () => {
        return 29
      }
    }
  },

  data() {
    return {
      numbers: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    open() {
      document.body.classList.add('z-overflow-hidden')
    },
    close() {
      document.body.classList.remove('z-overflow-hidden')
    },
    numberSplit(number) {
      return number.split('-')
    },
    _api() {
      my_numbers({ key: this.activityKey }).then(({ data: { result } }) => {
        this.numbers = result
      })
    },
    request() {
      this._api()
    }
  },
  created() {},
  mounted() {},
  updated() {
    if (this.flag) {
      this.open()
    } else {
      this.close()
    }
  }, //生命周期 - 更新之后
  beforeDestroy(){
    this.close()
  },
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
@import url('../assets/style/mixin'); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.4;
  z-index: 30;
}
.share-order {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 14px;
  width: 100%;
  height: 0;
  box-sizing: border-box;
  z-index: 320;
  background: #fff;
  transition: all 0.3s ease;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .share-icon {
    width: 24px;
    height: 24px;
    .bg-image('../../assets/imgs/reword-rule');
    background-size: 100% 100%;
  }
  .close {
    height: 16px;
    width: 16px;
    .bg-image('../../assets/imgs/close-dialog');
    background-size: 100% 100%;
  }
}
.show {
  height: 543px;
}
.content-wrapper {
  height: 480px;
  overflow: auto;
}
.customer {
  padding: 10px 0 6px;
  height: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #f0474f;
  transition: all 0.3s ease;
  z-index: 999;
  .consultation {
    margin: 0 auto;
    width: 110px;
    height: 28px;
    background: rgba(240, 71, 79, 1);
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
  }
  .tip-text {
    margin-top: 9px;
    font-size: 12px;
    color: rgba(240, 71, 79, 1);
    text-align: center;
  }
}
.customer-show {
  height: 64px;
}
.number-item {
  margin: 0 15px 11px;
  height: 99px;
  border: 1px solid rgba(220, 220, 220, 1);
}
.number {
  flex-shrink: 0;
  font-size: 18px;
  color: #ea373f;
  width: 96px;
  height: 100%;
}
.line {
  margin: 10px 0;
  width: 2px;
  height: 10px;
  background: #ea373f;
}
.shop-name {
  width: 220px;
  font-size: 14px;
}
.count {
  margin: 16px 0;
  font-size: 12px;
}
.time {
  font-size: 11px;
  color: #707070;
}
.divline {
  background: #fff;
  position: relative;
  height: 100%;
  width: 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  overflow: hidden;
  &::before {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid rgba(220, 220, 220, 1);
    box-sizing: border-box;
    content: '';
    left: 0;
    top: 0;
    transform: translateY(-50%);
    z-index: 300;
  }
  &::after {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(220, 220, 220, 1);
    content: '';
    right: 0;
    bottom: 0;
    transform: translateY(50%);
    z-index: 300;
  }
  .line {
    width: 0;
    height: 73px;
    border: 1px dashed #ea662c;
    opacity: 0.42;
  }
}
</style>